<template>
    <view class="content">
        <!-- 头部 -->
        <u-navbar :fixed="true" :shadow="true" :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back" title="申请补卡">
            <view slot="right" class="uni-dec-color" @tap="bukaRecord">补卡记录</view>
        </u-navbar>
        
        <view class="uni-area">
            <view class="u-m-t-30 u-font-32 font-bold">人员信息</view>
            <uni-item-member-plus v-if="memberDetail" class="u-m-t-30" :listItem="memberDetail"/>

            <!-- 补卡类型 -->
            <view class="u-m-t-30 uni-shadow">
                <view class="u-flex">
                    <text class="u-m-r-30 u-font-28 font-bold">补卡类型</text>
                    <view class="u-flex u-row-between input" @tap.stop="makeCard.typeShow=false">
                        <u--text mode="text" :text="form.bklxTxt"></u--text>
                    </view>
                </view>
            </view>

            <!-- 补卡时间 -->
            <view class="u-m-t-30 uni-shadow">
                <view class="u-flex">
                    <text class="u-m-r-30 u-font-28 font-bold">补卡时间</text>
                    <view class="u-flex u-row-between input" @tap.stop="makeCard.dateShow=true">
                        <u--text mode="text" :text="form.bksj"></u--text>
                        <u-icon name="calendar" size="28"></u-icon>
                    </view>
                </view>
            </view>

            <!-- 补卡原因 -->
            <view class="u-m-t-30 uni-shadow">
                <text class="u-font-32 font-bold">补卡原因</text>
                <u--textarea class="u-m-t-30 u-p-30" v-model="form.bkyy" style="border:1rpx solid #eee"
                    :autoHeight="false" :height="150"
                    placeholder="请输入补卡原因" placeholderClass="uni-placeholder" >
                </u--textarea>
            </view>

            <!-- 提交申请&取消 -->
            <view class="u-m-t-74 u-flex u-row-center">
                <u-button class="btn" type="primary" text="提交申请" @tap="submit"></u-button>
                <u-button class="btn u-m-l-40 btn1" text="取消" @tap="back"></u-button>
            </view>
        </view>

        <!-- 补卡类型picker -->
        <u-picker :show="makeCard.typeShow" :columns="makeCard.types" keyName="label" 
            :closeOnClickOverlay="true" @close="makeCard.typeShow=false" @cancel="makeCard.typeShow=false"
            @confirm="confirmType">
        </u-picker>

        <!-- 年月日选择器 -->
        <u-datetime-picker 
            :show="makeCard.dateShow"
            mode="time"
            :value="makeCard.time"
            :closeOnClickOverlay="true"
            @close="makeCard.dateShow=false"
            @cancel="makeCard.dateShow=false"
            @confirm="confirmTime">
        </u-datetime-picker>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data(){
        return{
            userInfo: uni.getStorageSync('userInfo'),
            rybh: null, // 人员编号
            memberDetail: null, // 人员详情
            makeCard:{
                typeShow: false,
                types: [
                    [
                        { label: '进场', value: 1 },
                        { label: '离场', value: 2 }
                    ]
                ],
                dateShow: false,
                date: '',
                time: '',
            },
            form: {
                deptId: uni.getStorageSync('userInfo').deptId,
				xmbh: '', //项目编号
				xmmc: '', //项目名称
				gcbh: '', //工程编号
				gcmc: '', //工程名称
				jsgz: '', //角色工种
				bzbh: '', //班组编号
				bzmc: '', //班组名称
				rybh: '', //人员编号
				xm: '', //人员姓名
				zjhm: '', //证件号码
				lxfs: '', //联系电话
				bksj: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), //补卡时间
				bkyy: '', //补卡原因
				bklx: 1, //补卡类型(1:进场,2:出场)
				sjly: 'APP', //数据来源
				bklxTxt: '进场',
			},
        }
    },



    onLoad(option){
        this.rybh = option.rybh
        if( option.bklx ){
            this.form.bklx = option.bklx
            this.form.bklxTxt = option.bklx==1?'进场':'离场'
            this.form.bksj = this.$moment(option.bksj).format('YYYY-MM-DD HH:mm:ss')
            this.makeCard.date =  this.$moment(option.bksj).format('YYYY-MM-DD')
            this.makeCard.time = this.$moment(option.bksj).format('HH:mm:ss')
        }
        this.form.xmbh = this.userInfo.ssgcbh, //项目编号
        this.form.xmmc = this.userInfo.ssgcmc, //项目名称
        this.form.gcbh = this.userInfo.ssgcbh, //工程编号
        this.form.gcmc = this.userInfo.ssgcmc, //工程名称
        // 人员详情
        this.getMemberDetail()
    },


    methods: {
        // 返回
        back(){
            uni.navigateBack()
        },
        // 补卡记录
        bukaRecord(){
            uni.navigateTo({ url: '/pages/kaoqin-bag/buka-record?rybh='+this.rybh })
        },
        // 自定义格式化规则
        formatter(type, value) {
            if (type === 'year') return `${value}年`
            if (type === 'month') return `${value}月`
            if (type === 'day') return `${value}日`
            if (type === 'hour')return `${value}时`
            if (type === 'minute') return `${value}分`
            return value
        },


        // 人员详情
        getMemberDetail(){
            const api = JSON.parse(JSON.stringify(this.$apis.MemberDetail))
            api.url = api.url+'/'+this.rybh
            this.$request(this,api,{}).then(res=>{
                // console.log('人员详情',res)
                this.memberDetail = res
                this.form.jsgz = res.zwzc, //角色工种
				this.form.bzbh = res.bzid, //班组编号
				this.form.bzmc = res.bzmc, //班组名称
				this.form.rybh = res.id, //人员编号
				this.form.xm = res.xm, //人员姓名
				this.form.zjhm = res.zjhm, //证件号码
				this.form.lxfs = res.lxfs //联系电话
            }).then()
        },

        // 选择补卡类型
        confirmType(e){
            this.form.bklxTxt = e.value[0].label
            this.form.bklx = e.value[0].value
            this.makeCard.typeShow = false
        },
        // 选择时间
        confirmTime(e){
            this.form.bksj = this.makeCard.date + ' ' + e.value+':00'
            this.makeCard.dateShow = false
        },

        // 提交
        submit(){
            if( this.form.bkyy ){
                uni.showLoading({ title:'补卡提交中', mask: true })
                this.$request('this',this.$apis.clockMakeCard,this.form).then(res=>{
                    uni.redirectTo({ url: '/pages/kaoqin-bag/buka-record?rybh='+this.rybh })
                })
            }else{
                uni.$u.toast('请输入补卡原因')
            }
        }
    },
}
</script>

<style scoped lang="scss">
    .content{
        .input{
            width: 480rpx;
            height: 68rpx;
            border: 1rpx solid #DFDFDF;
            border-radius: 10rpx;
            padding: 0 30rpx 0 24rpx;
        }
        .btn{
            width: 280rpx;
            border-radius: 20rpx;
            margin: 0;
        }
        .btn1{
            background: #F0F0F0;
            /deep/.u-button__text{
                color: #ADB4BD;
            }
        }
    }
</style>